<template>
	<div class="page sign-page">
		<!-- 背景图层 -->
		<div class="bg-top-image"></div>
		<div class="header">
			<div class="reward-label">累计获得奖励</div>
			<div class="reward-value" @tap="handleArrowClick">
				<div class="number">{{ total_all }} </div>
				<div class="number" > > </div>
			</div>
		</div>

		<div class="sign-card">
			<div class="sign-days">本月签到 {{ sign_in_days }} 天</div>
			<div class="btn" @tap="handleSignIn">立即签到</div>
		</div>
	</div>
</template>

<script lang="js">
	import Config from "@/common/config.js"; // 本地配置数据
export default {
	data() {
		return {
			sign_in_days: 0,
			total_money: 0,
			total_all: 0
		};
	},
	methods: {
		handleBack() {
			uni.navigateBack();
		},
		// 处理箭头点击，跳转到签到页面
		handleArrowClick() {
			console.log("跳转到签到日志页");
			uni.navigateTo({
				url: '/pages/signin/log'  // 请确保该路径正确
			});
		},
		// 处理签到操作
		handleSignIn() {
			const userinfo = uni.getStorageSync('userinfo');
			const userId = userinfo.user_id; // 获取 user_id

			// 调用后端接口，检查是否已签到
			this.$u.post(`https://${Config.baseUrl}/api/Redpacket/signIn`, {
				user_id: userId // 传递 user_id
			}).then(res => {
				if (res.status === 'success') {
					// 签到成功，显示签到成功消息
					uni.showToast({
						title: '签到成功',
						icon: 'success'
					});

					// 调用获取签到状态接口，刷新签到信息
					this.getSignInStats();
				} else if (res.message === '今日已签到，请勿重复操作') {
					// 已经签到，提示明日再来
					uni.showToast({
						title: '今日已签到，明日再来',
						icon: 'none'
					});
				} else {
					this.$refs.uToast?.show({
						title: res.message || '签到失败',
						type: 'error'
					});
				}
			}).catch(err => {
				console.error("请求失败", err);
				this.$refs.uToast?.show({
					title: '网络异常',
					type: 'error'
				});
			});
		},
		// 获取签到状态和奖励信息
		getSignInStats() {
			const userinfo = uni.getStorageSync('userinfo');
			const userId = userinfo.user_id; // 获取 user_id
			console.log("userId：" + userId);

			this.$u.post(`https://${Config.baseUrl}/api/Redpacket/getSignInStats`, {
				user_id: userId // 传递 user_id
			}).then(res => {
				if (res.status === 'success') {
					const data = res.data;
					this.sign_in_days = data.sign_in_days; // 签到天数
					this.total_money = data.total_money; // 累计金额
					this.total_all = data.total_all; // 总奖励
				} else {
					this.$refs.uToast?.show({
						title: '加载失败',
						type: 'error'
					});
				}
			}).catch(err => {
				console.error("请求失败", err);
				this.$refs.uToast?.show({
					title: '网络异常',
					type: 'error'
				});
			});
		}
	},
	onLoad() {
		// 加载签到状态和奖励信息
		this.getSignInStats();
	}
};
</script>



<style lang="less" scoped>
	.bg-top-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 375px;
		height: 270px;
		background-image: url('@/static/bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		opacity: 1;
		/* 100% 不透明 */
		z-index: 0;
	}

	/* 让内容在图层上方 */
	.header,
	.sign-card {
		position: relative;
		z-index: 1;
	}

	.page {
		width: 100%;
		min-height: 100vh;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.nav {
		display: flex;
		align-items: center;
		position: relative;
		margin-bottom: 80rpx;
	}

	.back-icon {
		width: 48rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.title {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		color: #FFFFFF;
		font-size: 36rpx;
		font-weight: 500;
	}

	.header {
		margin-top: 40rpx;
		margin-bottom: 80rpx;

		.reward-label {
			color: #FFFFFF;
			font-size: 28rpx;
			margin-bottom: 20rpx;
		}

		.reward-value {
			display: flex;
			align-items: center;

			.number {
				color: #FFFFFF;
				font-size: 48rpx;
				font-weight: bold;
				margin-right: 12rpx;
			}
		}
	}

	.sign-card {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 20rpx 32rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);

		.sign-days {
			text-align: center;
			color: #333333;
			font-size: 32rpx;
			margin-bottom: 32rpx;
			font-weight: 550;
		}

		.btn {
			background: #FF8C3D;
			color: #FFFFFF;
			font-size: 32rpx;
			border-radius: 44rpx;
			padding: 20rpx 0;
			width: 100%;
			text-align: center;
		}

		.btn:active {
			opacity: 0.9;
		}
	}
</style>